<template>
  <main>
    <x-header :left-options="{backText : ''}">新增规章
      <div slot="overwrite-left" @click="goBack" class="goBack"></div>
    </x-header>
    <!--用户信息 start-->
    <userInfo></userInfo>
    <!--用户信息 end-->
    <section>
      <group :title="'规章标题'">
        <x-textarea  style="box-shadow: 0px 0px 1px #888888;" v-model="rulesTitle" :height="45"></x-textarea>
      </group>
    </section>
    <section>
      <group :title="'规章内容'">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
      </group>
    </section>
    <section class="file">
      <div class="title">
        <span>附件上传
          <x-icon class="icon" type="ios-plus-empty" fill="#0000ff" size="28"></x-icon>
        </span>
        <input type="file" @change="getFile($event)">
      </div>
    </section>
    <section class="file-list" v-if="uploadFile.length != 0">
      <div class="file-item"  v-for="(item, index) in uploadFile" :key="index" >
        <span>{{item.imgName}}</span>
        <x-icon class="icon" type="ios-close-outline" fill="red" size="20" @click="remove(item)"></x-icon>
      </div>
    </section>
    <section class="add-time">
      <label for="">新增时间:</label>
      <div>{{new Date() | formatDate('YYYY-MM-DD')}}</div>
    </section>
    <section class="submit"  @click="submit()">
      <x-button >确认修改</x-button>
    </section>
    <section class="submit"  @click="del">
      <x-button  type="warn">删除规章</x-button>
    </section>
  </main>
</template>

<script>
import userInfo from '../components/userInfo'
import { XTextarea, Group, XInput } from 'vux'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import * as api from '../api/api'
export default {
  components: {
    userInfo,
    XTextarea,
    Group,
    XInput
  },
  data () {
    return {
      id: '', // 规章 id
      rulesTitle: '', // 规章标题
      editor: ClassicEditor,
      editorData: '', // 规章内容
      editorConfig: { // 编辑文本框配置
        toolbar: []
      },
      file: '', // 上传文件
      uploadFile: [] // 上传文件数组
    }
  },
  created () {
    // 获取编辑数据
    let { id, title, content, attachment } = this.$store.state.rulesDetail
    this.id = id // 规章 id
    this.rulesTitle = title // 规章标题
    this.editorData = content // 规章内容
    this.uploadFile = JSON.parse(attachment) // 附件内容
  },
  methods: {
    goBack () {
      console.log(this.$router.go(-1))
    },
    // 图片上传
    getFile (event) {
      this.file = event.target.files[0]
      console.log(this.file)
      // event.preventDefault() // 取消默认行为
      // 创建 formData 对象
      let formData = new FormData()
      // 向 formData 对象中添加文件
      formData.append('file', this.file)
      api.upload(formData).then(res => {
        let item = {
          imgName: res.originalname,
          imgUrl: res.url
        }
        this.uploadFile.unshift(item)
        console.log(res)
      })
    },
    // 图片删除
    remove (item) {
      this.uploadFile.splice(this.uploadFile.indexOf(item), 1)
    },
    // 修改规章提交
    submit () {
      if (this.rulesTitle && this.editorData) {
        const params = {
          id: this.id, // 规章 id
          title: this.rulesTitle, // 规章标题
          content: this.editorData, // 公章内容
          attachment: this.uploadFile, // 附件
          sender: 'admin', // 发送人
          preview: this.editorData // 内容描述
        }
        api.rulseEdit(params).then(res => {
          console.log(res)
          this.$router.push('/')
        })
      } else {
        alert('标题或内容不能为空')
      }
    },
    // 规章删除
    del () {
      const params = {
        id: this.id
      }
      api.rulseDelete(params).then(res => {
        console.log(res)
        this.$router.push('/')
      })
    }
  }
}
</script>
<style lang="less" scoped>
  main {
    background: @eee;
    height: 100%;

  }
  /deep/.weui-cells__title {
    font-size: 1.5rem;
    text-align: left;
    color: #000;
    font-weight: bold;
  }
  /deep/.ck-content {
    max-height: 100px;
    p {
      text-align: left;
    }
  }
  .file {
    // max-height: 20rem;
    // min-height: 5rem;
    display: flex;
    padding-top: 1rem;
    .title {
      font-size: 1.5rem;
      padding-left: 1rem;
      text-align: left;
      color: #000;
      font-weight: bold;
      min-width: 80px;
      height: 100%;
      position: relative;
      .icon {
        position: absolute;
        top: -3px;
        pointer-events: none;
      }
      input {
        width: 28px;
        height: 16px;
        opacity: 0;
        position: absolute;
      }
    }
    .input {
      height: 100%;

    }
  }
  .file-list {
    text-align: left;
    padding-left: 1rem;
    padding-top: 0.5rem;
    font-size: 1.4rem;
    .file-item {
      position: relative;
      height: 30px;
      line-height: 30px;
      font-weight: bold;
    }
    .icon {
      top: 8px;
      position: absolute;
      padding-left: 10px;
    }
  }
  .add-time {
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    padding: 1.5rem 1rem;
    div {
      padding-left: 16px;
    }
  }
  .submit {
    padding: 16px;
  }
</style>
